<!DOCTYPE html>

<!-- Copyright (c) 2013, Google Inc. Please see the AUTHORS file for details.
     All rights reserved. Use of this source code is governed by a BSD-style
     license that can be found in the LICENSE file. -->

<!--
/**
 * spark-selector is used to display a list of elements that can be selected.
 * The attribute [selected] indicates which element is being selected.
 * Tapping on the element to change selection would fire "activate"
 * event.
 *
 * Example:
 *
 *     <spark-selector selected="0" on-activate="{{activateHandler}}">
 *       <div>Item 1</div>
 *       <div>Item 2</div>
 *       <div>Item 3</div>
 *     </spark-selector>
 *
 * spark-selector is not styled: one needs to supply CSS attributes and/or
 * classes to apply to elements when they become active (on hover) or selected
 * (on a tap). The names of these attributes/classes can be passed via
 * [activeClass], [activeAttr], [selectedClass] and [selectedAttr] attributes.
 *
 * Only ligth DOM content nodes satisfying the [itemFilter] will participate in
 * the activation/selection process. The rest of the nodes (e.g. separators)
 * will become inactive content.
 */
/**
 * Fired when an element changes it's selected state (gains or loses selection)
 * via a tap. That means that there can be more than one events fired per click
 * (e.g. the previsously selected item or items lose selection, and the new one
 * gains it).
 *
 * @event activate
 * @param {String} detail['value'] the item's [valueAttr] attribute
 * @param {bool} detail['isSelected'] the item's new selected state
 */
-->

<link rel="import" href="../../../packages/spark_widgets/common/spark_widget.html"/>
<link rel="import" href="../../../packages/spark_widgets/spark_selection/spark_selection.html">

<polymer-element name="spark-selector" extends="spark-widget"
    attributes="multi
                inSelection
                valueAttr
                itemFilter
                activeClass
                activeAttr
                selectedClass
                selectedAttr">
  <template>
    <link rel="stylesheet" href="spark_selector.css">

    <spark-selection id="selection"
        multi="{{multi}}"
        on-select="{{selectionSelectHandler}}">
    </spark-selection>

    <content id="items" select="*"></content>
  </template>

  <script type="application/dart" src="spark_selector.dart"></script>
</polymer-element>
